<template>
  <div class="header-right">
    <!-- 通知菜单 -->
    <div class="header-right__notification">
      <el-popover 
        placement="bottom" 
        :width="317" 
        trigger="click"
      >
        <template #reference>
          <el-icon 
            class="notification-icon"
          >
            <Bell />
          </el-icon>
        </template>
        <el-tabs v-model="activeTab">
          <el-tab-pane
            v-for="tab in notificationTabs"
            :key="tab.name"
            :label="tab.label"
            :name="tab.name"
          >
            <div class="notification-actions">
              <div class="action-btn">
                <el-icon><Check /></el-icon>
                一键标为已读
              </div>
              <div class="action-btn">
                <el-icon><View /></el-icon>
                查看全部
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-popover>
    </div>

    <!-- 用户菜单 -->
    <div class="header-right__user">
      <el-dropdown trigger="click">
        <span class="user-avatar">
          <img
            src="@/assets/homePage/26.png"
            alt="用户头像"
            class="avatar-img"
          >
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item 
              v-for="item in userMenuItems" 
              :key="item.id"
            >
              <div @click="handleMenuClick(item)">
                <el-icon><component :is="item.icon" /></el-icon>
                {{ item.label }}
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

  <script>
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Bell, Check, RightHeaderView, Postcard, RightHeaderLink, Setting, User } from '@element-plus/icons-vue'
  
  export default {
    name: "RightHeader",
    components: {
      Bell,
      Check,
      RightHeaderView,
      Postcard,
      RightHeaderLink,
      Setting,
      User
    },
    data() {
      return {
        activeTab: 'all',
        notificationTabs: [
          { label: '全部', name: 'all' },
          { label: '教学活动', name: 'teaching' },
          { label: '教务通知', name: 'academic' },
          { label: '系统通知', name: 'system' }
        ],
        userMenuItems: [
          { id: 'vip', icon: 'Postcard', label: '开通VIP' },
          { id: 'auth', icon: 'Link', label: '机构用户认证' },
          { id: 'settings', icon: 'Setting', label: '个人设置' },
          { id: 'logout', icon: 'User', label: '退出账户' }
        ]
      }
    },
  
    methods: {
      handleMenuClick(item) {
        switch(item.id) {
          case 'settings':
            this.toUserSetting();
            break;
          case 'logout':
            this.logout();
            break;
        }
      },
  
      toUserSetting() {
        const currentPath = this.$route.path;
        if (currentPath !== '/userSetting') {
          this.$router.push('/userSetting');
        }
      },
  
      async logout() {
        try {
          await ElMessageBox.confirm('您确定要退出吗?', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          });
          
          await this.$store.dispatch('logout');
          ElMessage.success("退出成功");
          this.$router.push('/');
        } catch (err) {
          // 用户取消退出，不做处理
        }
      },
    },
  }
  </script>
  
  <style scoped lang="less">
  .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
  
    &__notification {
      .notification-icon {
        font-size: 24px;
        cursor: pointer;
        color: #606266;
      }
    }
  
    &__user {
      .user-avatar {
        cursor: pointer;
        display: block;
      }
  
      .avatar-img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: block;
      }
    }
  }
  
  .notification-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #4285f4;
    font-size: 14px;
    font-weight: 500;
  
    .action-btn {
      cursor: pointer;
      width: 50%;
      height: 50px;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;

      &:hover {
        opacity: 0.8;
      }
    }
  }
  </style>